<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        /* 第一个li */
        ul li:first-child{
            color: red;
        }
        /* 第三个li */
        ul li:nth-child(3){
            color: green;
        }
        /* 最后一个li */
        ul li:last-child{
            color: pink;
        }
        /* 2n是偶数个 */
        ul li:nth-child(2n){
            background-color: #eee;
        }
    </style>
</head>
<body>
    <!-- ul>li*8{第￥个} -->
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
    </ul>
</body>
</html>